﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" content="chrome=1, IE=edge" http-equiv="X-UA-Compatible" />
  
    <title>WWT Web Client Tours</title>
    <script src="http://www.worldwidetelescope.org/webclient/sdk/wwtsdk.js"></script>	
    <script>

    // The WorldWide telescope object variable

    var wwt;

    // This function initializes the wwt object and registers the wwtReady event
    // once the initialization is done the wwtReady event will be fired
    function initialize() {
        wwt = wwtlib.WWTControl.initControl("WWTCanvas");
        wwt.add_ready(wwtReady);
    }

    // loadTour

    function loadTour(n) {
        
        switch (n) {
            case 1:
                wwt.loadTour("http://www.worldwidetelescope.org/docs/wtml/tourone.wtt");

                document.getElementById("playing").value = "Playing Tour 1";
                break;

            case 2:
                wwt.loadTour("http://www.worldwidetelescope.org/docs/wtml/tourtwo.wtt");

                document.getElementById("playing").value = "Playing Tour 2";
                break;
        }
        
        document.getElementById("tour1").disabled = true;
        document.getElementById("tour2").disabled = true;
        document.getElementById("restart").disabled = false;
        document.getElementById("stop").disabled = false;
    }


    // stopTour

    function stopTour() {
        
        wwt.stopTour();
        
        document.getElementById("tour1").disabled = false;
        document.getElementById("tour2").disabled = false;
        document.getElementById("restart").disabled = true;
        document.getElementById("stop").disabled = true;

        document.getElementById("playing").value = "No tour currently playing";
    }

    // restartTour

    function restartTour() {
        wwt.playTour();
    }
	

	function wwtReady() {

	}

    </script>

</head>

<body onload="initialize()" >

<!-- The body section creates a table with two columns. The first contains the -->
<!-- WWTControl object that is the WWT web client. And the second a table within-->
<!-- the table, containing some controls.-->

<table border="2" bgcolor="lightgrey">
	<tr><td>
		   <div id="WorldWideTelescopeControlHost">
               <div id="WWTCanvas" style="width: 750px; height: 750px; border-style: none; border-width: 0px;">
               </div>
    </div>
	</td><td>

	<table border="2" cellspacing="4" cellpadding="4" bgcolor="gold">
	
	<tr>
	<th><h2>Sample WWT Web Client Tours</h2></th>
	</tr>
		
	<tr>
	<th><input id="tour1" type="button" value="Load Tour 1" onclick="loadTour(1);"/>
	<input id="tour2" type="button" value="Load Tour 2" onclick="loadTour(2);"/></th>
	</tr>
	
	<tr>
	<th><input id="playing" type="text" value="No tour currently playing" /></th>
	</tr>
		
	<tr>
    <th><input id="restart" type="button" value="Restart" disabled="disabled" onclick="restartTour();"/>
		<input id="stop"    type="button" value="Stop"    disabled="disabled" onclick="stopTour();"/></th>
	</tr>
	
</table>
</td>
</tr>
</table>

</body>
</html>
